<template>
    <div style="height:100%">
      <div class="container">
        <!-- 操作栏卡片 -->
        <operation>
          <template #left>
            <el-form label-width="70px">
              <el-form-item label="用户姓名">
                <el-input v-model="form.name" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="form.idNumber" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <el-form-item  rm-item label="地区">
                <el-cascader
                  ref="address"
                  clearable
                  placeholder="请选择..."
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange"
                  :filterable="true"
                  style="width:180px">
                </el-cascader>
              </el-form-item>
            </el-form>
          </template>
          <template #right>
            <el-button native-type="submit" plain class="search" @click.prevent="search">查询</el-button>
            <el-button plain class="reset" @click="reset">重置</el-button>
          </template>
        </operation>

        <!-- 表格卡片 -->
        <el-card class="table-card">
          <template>
            <!-- 表格 -->
            <el-table
              height=450
              :data="userdata"
              border
              style="width: 100%">
              <el-table-column
                align="center"
                prop="name"
                label="用户姓名"
                width="100">
              </el-table-column>
              <el-table-column
                align="center"
                label="用户性质"
                width="100">
                <template slot-scope="scope"><span>{{ scope.row.type | userType }}</span></template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="idNumber"
                label="身份证号">
              </el-table-column>
              <el-table-column
                align="center"
                prop="area"
                label="地区">
              </el-table-column>
              <el-table-column
                align="center"
                prop="detailedArea"
                label="详细地址"
                width="180">
              </el-table-column>
              <el-table-column
                align="center"
                prop="mobile"
                label="手机号"
                width="120">
              </el-table-column>
              <el-table-column
                align="center"
                prop="correlationFamily"
                label="关联家人数量"
                width="120">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                width="150">
                <el-button type="text">查看详细档案</el-button>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @current-change="pageChange"
              background
              layout="prev, pager, next"
              :page-count="count">
            </el-pagination>
          </template>
        </el-card>
      </div>
    </div>
</template>

<script>
import { regionData, codeToText } from 'element-china-area-data';
import operation from '@/components/operation/index.vue';
import { userfile } from '@/api/user';

export default {
  components: {
    operation,
  },
  name: '',
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        address: '',
      },
      options: regionData,
      selectedOptions: [],
      userdata: [],
      page: '1',
      pagesize: '10',
      total: 0,
      count: 0,
    };
  },
  methods: {
    handleChange(value) {
      this.address = codeToText[value[0]] + codeToText[value[1]] + codeToText[value[2]];
    },
    async getList() {
      this.$emit('active', 'user');
      const res = await userfile({
        _page: this.page,
        _limit: this.pagesize,
      });
      this.userdata = res.data;
      const { _page: count } = res.pagination.last;
      this.count = +count;
      // console.log(res);
    },
    pageChange(val) {
      this.page = val;
      this.getList();
    },
    async search() {
      const res = await userfile({
        _page: this.page,
        _limit: this.pagesize,
        name_like: this.form.name,
        idNumber_like: this.form.idNumber,
        area_like: this.address,
      });
      this.userdata = res.data;
      console.log(res);
    },
    reset() {
      this.form.name = '';
      this.form.idNumber = '';
      this.$refs.address.$refs.panel.checkedValue = [];
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.el-form {
  display: flex;
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

::v-deep .reset:hover {
  border-color: #000;
  color: #000
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table-card {
  flex-grow: 1;
  margin-top: 10px;
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
